<template>
  <div class="meizhou" ref="meizhou"></div>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts'
// 引入没注释地图数据
import meizhou from '../../public/meizhou.json'
// 注册梅州市地图
echarts.registerMap('meizhou', meizhou)
export default {
  name: 'MeiZhou',
  data() {
    return {}
  },
  methods: {
    // 初始化广东地图echart
    initMeiZhoumap() {
      // 初始化 echarts
      const mz = echarts.init(this.$refs.meizhou)
      // 广东省配置
      const meizhouoption = {
        // 提示浮窗样式
        tooltip: {
          show: true,
          trigger: 'item',
          alwaysShowContent: false,
          backgroundColor: '#ffffff',
          borderColor: 'rgba(0, 0, 0, 0.16);',
          hideDelay: 100,
          triggerOn: 'mousemove',
          enterable: true,
          textStyle: {
            color: '#000000',
            fontSize: '12',
            width: 20,
            height: 30,
            overflow: 'break'
          },
          showDelay: 100
        },
        // 地图配置
        geo: {
          map: 'meizhou',
          roam: false, // 一定要关闭拖拽
          label: {
            // 通常状态下的样式
            normal: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            },
            // 鼠标放上去的样式
            emphasis: {
              textStyle: {
                color: '#fff'
              }
            }
          },
          // 地图区域的样式设置
          itemStyle: {
            normal: {
              areaColor: '#0d0059',
              borderColor: '#389dff',
              borderWidth: 1, // 设置外层边框
              shadowBlur: 5,
              shadowOffsetY: 8,
              shadowOffsetX: 0,
              shadowColor: '#01012a'
            },
            emphasis: {
              areaColor: '#184cff',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 5,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.2)'
            }
          }
        }
      }

      mz.setOption(meizhouoption)
      //
    }
  },
  mounted() {
    this.initMeiZhoumap()
  }
}
</script>

<style lang="less" scoped>
.meizhou {
  width: 100%;
  height: 100%;
  padding: 0 0 50px 15px;
}
</style>
